<template>
  <div class="overview">
    <p class="report-btn" :class="{disabled: downloading}" @click="downloadReport">
      <i v-show="downloading" class="el-icon-loading"></i>
      <span>一键报告</span>
    </p>
    <div class="panel">
      <div v-show="keyword!==''" class="info" :class="{all: showMore}">
        <h4>{{keyword}}</h4>
        <p><i v-if="synonym===''" class="el-icon-loading"></i>{{synonym}}</p>
        <el-divider></el-divider>
        <ul class="paraphrase-box">
          <li v-for="(item, index) in paraphraseList" :key="index">
            <p class="ab">
              <i class="iconfont icon--nav-zixun"></i>
              <span :title="item.text" v-html="item.textStr"></span>
            </p>
            <p class="other">
              <span>来源：<i>{{item.source}}</i></span>
              <span>作者：{{item.author&&item.author.join(' ')}}</span>
            </p>
          </li>
        </ul>
        <div v-if="showMoreParaphrase" class="bottom">
          <span class="more-btn" @click="getMoreParaphrase">展开更多</span>
        </div>
      </div>
      <dl class="model">
        <dd v-for="(item, index) in modelData" :key="index" @click="handleChangeType(item)">
          <h5><i :class="['iconfont', item.icon]"></i><span>{{item.label}}</span></h5>
            <div class="number">
              <template v-if="item.value==='loading'" class="no-data">
                <span><i class="el-icon-loading"></i></span>
              </template>
              <template v-else>
                <span>{{item.value}}</span>
              </template>
              <p>项</p>
            </div>
          <p class="abst">
            <template v-if="keyword!==''">
              与{{keyword}}{{item.abst}}
            </template>
            <template v-else>{{item.def_abst}}</template>
          </p>
        </dd>
      </dl>
    </div>
    <aside class="aside">
      <div class="work">
        <h5><i class="circle"></i><span>相关推荐</span></h5>
        <p class="list">
          <span v-for="(item, index) in suggestData" :key="index" :style="{color: colors[index%5]}" @click="search(item)">{{item.name}}</span>
        </p>
        <div v-if="suggestData.length<=0" class="no-data">
          <loading2 :emptyText="suggestDataEmptyText"/>
        </div>
      </div>
      <div class="work">
        <h5><i class="circle"></i><span>热门关键词</span></h5>
        <p class="list">
          <span v-for="(item, index) in hotData" :key="index" :style="{color: colors[index%5]}" @click="search(item)">{{item.name}}</span>
        </p>
      </div>
      <div class="work">
        <h5><i class="circle"></i><span>检索历史</span></h5>
        <p class="list">
          <span v-for="(item, index) in info['searchHistory']" :key="index" :style="{color: colors[index%5]}" @click="search(item)">{{item}}</span>
        </p>
      </div>
    </aside>
  </div>
</template>

<script>
import axios from 'axios'
import {thousands} from '@/utils/utils'
import { mapState } from "vuex";
export default {
  inject: ['reload'],
  data() {
    return {
      keyword: '',
      info: {},
      synonym: '', // 同义词
      paraphraseList: [], // 释义列表
      paraphraseListLoading: false, // 释义列表是否正在请求中
      showMoreParaphrase: true, // 是否显示释义列表的更多按钮
      ipi: 1,
      ips: 3,
      total: 0,
      scrollOps: {
        vuescroll: {
          mode: 'native'
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: 'rgba(255,255,255,.1)',
          gutterOfEnds: '10px'
        },
        bar: {
          background: '#eee',
          size: '5px'
        }
      },
      showMore: false,
      showMoreBtn: false,
      suggestData: [], // 相关推荐
      suggestDataEmptyText: 'loading', // 相关推荐loading
      modelData: [
        {name: '专利', label: '发明专利', icon: 'icon-zhuanli', abst: '相关的专利数据', def_abst: '所有发明专利数据', value: 'loading'},
        {name: '文献', label: '文献期刊', icon: 'icon-tushuguan', abst: '相关的文献期刊数据', def_abst: '所有文献期刊数据', value: 'loading'},
        {name: '科技成果', label: '科技成果', icon: 'icon-zongguichengguo', abst: '相关的科技成果数据', def_abst: '所有科技成果数据', value: 'loading'},
        {name: '科研项目', label: '科研项目', icon: 'icon-qiye', abst: '相关的科研项目数据', def_abst: '所有科研项目数据', value: 'loading'},
        {name: '标准', label: '标准数据', icon: 'icon-biaozhun-copy-copy', abst: '相关的标准数据', def_abst: '所有标准数据', value: 'loading'},
        {name: '行业资讯', label: '行业资讯', icon: 'icon--nav-zixun', abst: '相关的行业资讯数据', def_abst: '所有行业资讯数据', value: 'loading'},
        // {name: '专利', label: '发明专利', icon: 'icon-zhuanli', abst: '相关的发明专利数据', value: 'loading'},
        // {name: '文献', label: '文献期刊', icon: 'icon-tushuguan', abst: '相关的论文', value: 'loading'},
        // {name: '科技成果', label: '科技成果', icon: 'icon-zongguichengguo', abst: '相关的科技成果', value: 'loading'},
        // {name: '标准', label: '标准数据', icon: 'icon-biaozhun-copy-copy', abst: '相关的数据', value: 'loading'},
        // {name: '企业', label: '相关机构', icon: 'icon-qiye', abst: '相关的机构', value: 'loading'},
        // {name: '人才', label: '相关人才', icon: 'icon-rencai', abst: '相关的人才', value: 'loading'},
        // {name: '行业政策', label: '行业政策', icon: 'icon-zhengcejiedu', abst: '相关的行业政策', value: 'loading'},
        // {name: '行业资讯', label: '行业资讯', icon: 'icon--nav-zixun', abst: '相关的行业资讯', value: 'loading'},
        // {name: '产业', label: '产业信息', icon: 'icon-chanyejiqun', abst: '相关的产业信息', value: 'loading'},
      ],
      hotData: [], // 热门关键词
      colors: ['#6075e0', '#ae60e0', '#60e09f', '#60bae0', '#e0ae60'],
      noData: false,
      emptyText: '',
      downloading: false
    }
  },
  computed: {
    ...mapState(['username'])
  },
  methods: {
    init(opts) {
      this.showMoreBtn = false
      this.keyword = opts.searchTxt // '质子交换膜燃料电池' // opts.searchTxt
      this.paraphraseList = []
      // 获取同义词
      // this.getSynonym()
      // 获取释义列表
      this.getParaphraseList()
      // 获取数据展示
      this.getOverview()
      this.getOverviewExpert()
      // 获取关键词摘要、检索历史
      this.getComprehensive()
      // 相关推荐
      this.getSuggest()
      this.hotData = [
        {name: '碲化镉薄膜太阳能电池'},
        {name: '固态电池'},
        {name: '新能源发电'},
      ]
    },
    // 获取同义词
    getSynonym() {
      this.$post(this.$Url.IR.opinionQueryPage, {
        ipi: 1,
        ips: 10,
        words: [this.keyword]
      }).then(res => {
        // 同义词：CdTe太阳能电池、发电玻璃、碲化镉薄膜太阳能电池
      }).catch(err => {})
    },
    // 获取释义列表
    getParaphraseList() {
      if (this.paraphraseListLoading) {
        return
      }
      this.paraphraseListLoading = true
      this.$post(this.$Url.IR.queryNounAssociationPage, {
        ipi: this.ipi,
        ips: this.ips,
        keyword: this.keyword,
        sortOrder: '1'
      }).then(res => {
        this.paraphraseListLoading = false
        let result = res.data && res.data.result || []
        result.forEach(v => {
          v.textStr = v.text && v.text.replace(/<br>|<br\/>|<BR>|<BR\/>/g, '')
        })
        this.paraphraseList.push(...result)
        this.total = res.data && res.data.total
        if (this.ipi*this.ips >= this.total) {
          this.showMoreParaphrase = false
        }
      }).catch(err => {
        this.paraphraseListLoading = false
      })
      // this.paraphraseList = [
      //   {ab: '太阳能电池太阳能电池太阳能电池太阳能电池太阳能电池', from: '百度百科', author: ['冯晓东', '陈文超']}
      // ]
    },
    // 获取更多释义列表
    getMoreParaphrase() {
      this.ipi += 1
      this.getParaphraseList()
    },
    // 获取数据展示
    getOverview() {
      return
      // 重置
      this.modelData.forEach(v => {
        v.value = 'loading'
      })
      this.$get(this.$Url.IR.overview, {
        keyword: this.keyword
      }).then(res => {
        let data = res.data
        this.modelData.forEach(v => {
          if (data[v.name] || data[v.name] == 0) {
            v.value = thousands(data[v.name])
          }
        })
      }).catch(err => {})
    },
    // 获取数据展示-相关人才
    getOverviewExpert() {
      this.$get(this.$Url.IR.overviewExpert, {
        keyword: this.keyword
      }).then(res => {
        let data = res.data
        this.modelData.forEach(v => {
          if (data[v.name] || data[v.name] == 0) {
            v.value = thousands(data[v.name])
          }
        })
      }).catch(err => {})
    },
    // 获取关键词摘要、检索历史
    getComprehensive() {
      this.info = {}
      this.noData = true
      this.emptyText = 'loading'
      this.synonym = ''
      this.$post(this.$Url.IR.comprehensiveQueryPage, {
        keyword: this.keyword
      }).then(res => {
        this.noData = false
        let data = res.data
        if (Object.values(data).length > 0) {
          this.synonym = data.synonym && data.synonym.text || '暂无'
          this.info = {
            searchHistory: data.searchHistory || [], // 检索历史
          }
        } else {
          this.synonym = '暂无'
        }
        // if (Object.values(data).length > 0) {
        //   this.info = {
        //     keyword: data.keyword, // 关键词
        //     description: data.description || '无法找到你所查询的内容，换个关键词试试', // 简介
        //     searchHistory: data.searchHistory || [], // 检索历史
        //   }
        //   this.$nextTick(() => {
        //     // if (((this.$refs.abst && this.$refs.abst.clientHeight) > this.$refs.infoH5.clientHeight) && (this.info.description.length > 10)) {
        //     //   this.showMoreBtn = true
        //     // }
        //   })
        // }
      }).catch(err => {})
    },
    // 相关推荐
    getSuggest() {
      this.suggestData = []
      this.suggestDataEmptyText = 'loading'
      this.$post(this.$Url.IR.searchSuggest, {
        keyword: this.keyword
      }).then(res => {
        let data = res.data
        this.suggestData = data.suggest && data.suggest.filter((v, i) => i<6) || [] // 相关推荐
        if (this.suggestData.length <= 0) {
          this.suggestDataEmptyText = '暂无内容'
        }
      }).catch(err => {})
    },
    search(item) {
      this.$emit('keyword', item.name || item)
    },
    handleChangeShowAll() {
      this.showMore = !this.showMore
    },
    handleChangeType(item) {
      if (item.name === '产业') {
        return
      }
      let index = this.modelData.findIndex(v => v.name === item.name)
      this.$router.push({
        name: this.$route.name,
        query: {
          ...this.$route.query,
          type: index + 1
        }
      })
      this.reload()
    },
    // 报告下载
    downloadReport() {
      if (this.downloading) {
        return
      }
      this.downloading = true
      axios.get(this.$Url.IR.getDocByName, {
        responseType: 'blob',
        params: {
          name: '碲化镉太阳能电池技术全景分析报告'
        }
      }).then(res => {
        this.downloading = false
        let filename =
          res.headers["content-disposition"].split(";")[1].split("=")[1] ||
          "";
        if (filename) {
          filename = decodeURI(filename)
        }
        const aLink = document.createElement("a");
        aLink.style.display = "none";
        aLink.href = window.URL.createObjectURL(res.data);
        aLink.setAttribute("download", filename);
        document.body.appendChild(aLink);
        aLink.click();
        aLink.remove();
      }).catch(err => {})
    }
  },
  beforeMount() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.overview {
  position: relative;
  display: flex;
  width: 100%;
  .report-btn {
    position: absolute;
    top: -.58rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 1rem;
    // height: .32rem;
    height: .36rem;
    // line-height: .32rem;
    padding: 0 .3rem;
    border-radius: 4px;
    text-align: center;
    font-size: .15rem;
    color: $color2;
    background-color: $mainColor;
    cursor: pointer;
    &.disabled {
      background-color: rgba(47,65,200,.6);
      &:hover {
        background-color: rgba(47,65,200,.6);
      }
    }
    &.gray {
      background-color: #bbb;
      &:hover {
        background-color: #bbb;
      }
    }
    &:hover {
      background-color: rgba(47,65,200,.8);
    }
    i {
      font-size: .17rem;
    }
  }
  .panel {
    position: relative;
    width: calc(100% - .18rem - 2.76rem);
    margin-right: .18rem;
    .info {
      position: relative;
      width: 100%;
      padding: .1rem .2rem;
      border-radius: 8px;
      margin-bottom: .18rem;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      background-color: $color2;
      &.all {
        .abst {
          max-height: calc(100vh - .7rem - .48rem - .4rem - .48rem - .98rem);
          overflow: initial;
        }
        .arrow {
          transform: rotate(180deg);
        }
      }
      h4 {
        line-height: .26rem;
        margin-bottom: .1rem;
        text-align: left;
        font-size: .16rem;
        color: rgba(0,0,255,.8);
      }
      ::v-deep {
        .el-divider {
          margin: .1rem 0;
        }
      }
      .paraphrase-box {
        position: relative;
        li {
          padding-bottom: .15rem;
          .ab {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; // 控制行数
            line-height: 1.5;
            overflow: hidden;
            margin-bottom: .05rem;
            font-size: .14rem;
            color: rgba(51,51,51,1);
            i {
              display: inline-block;
              margin-right: .1rem;
              color: rgba(116,197,253,.98);
            }
            span {
              * {
                display: inline-block;
              }
            }
          }
          .other {
            position: relative;
            span {
              display: inline-block;
              margin-right: .2rem;
              font-size: .14rem;
              color: rgba(145,142,142,1);
              i {
                text-decoration: underline;
                color: rgba(124,115,200,1);
              }
            }
          }
        }
      }
      .bottom {
        position: relative;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        .more-btn {
          display: inline-block;
          font-size: .14rem;
          color: rgba(57,108,255,.9);
          cursor: pointer;
          &:hover {
            opacity: .9;
          }
        }
      }
      h5 {
        width: 100%;
        // min-height: .54rem;
        padding: .14rem .09rem;
        border-bottom: 1px solid $color36;
        box-sizing: border-box;
        // font-family: SourceHanSansCN-Bold;
        font-size: .16rem;
        font-weight: normal;
        text-align: left;
        color: $color47;
        .circle {
          position: relative;
          width: .16rem;
          height: .1rem;
          margin-right: .18rem;
          vertical-align: middle;
          &:before {
            position: absolute;
            top: 50%;
            left: -.04rem;
            z-index: 1;
            width: .1rem;
            height: .1rem;
            border-radius: 50%;
            margin-top: -.04rem;
            background-color: $color48;
            content: '';
          }
          &:after {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 1;
            width: .1rem;
            height: .1rem;
            border-radius: 50%;
            margin-top: -.04rem;
            background-color: $mainColor;
            content: '';
          }
        }
        span {
          vertical-align: middle;
        }
      }
      .abst-box {
        &.minHeight {
          min-height: 1.4rem;
        }
      }
      .abst {
        max-height: .67rem;
        line-height: .26rem;
        padding: .14rem 0;
        font-size: .16rem;
        text-align: left;
        color: $color84;
        transition: all .4s ease;
        overflow: hidden;
      }
      .arrow {
        display: inline-block;
        margin-top: .1rem;
        margin-bottom: .15rem;
        cursor: pointer;
        transition: all .4s ease;
        img {
          width: .2rem;
        }
      }
    }
    .model {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      dd {
        position: relative;
        width: calc((100% - .38rem) / 3);
        border-radius: 8px;
        margin-right: .19rem;
        margin-bottom: .18rem;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-image: url(../../../../../assets/img/IR/shape.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 60% auto;
        background-color: $color2;
        transition: all .4s ease;
        cursor: pointer;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
        &:hover {
          box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.4);
          h5 {
            background-color: $mainColor;
          }
        }
        h5 {
          display: flex;
          align-items: center;
          height: .36rem;
          padding: 0 .26rem;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          background-color: $color85;
          font-size: .16rem;
          color: $color2;
          i {
            margin-right: .1rem;
            font-size: .2rem;
          }
        }
        .number {
          position: relative;
          // height: 1.26rem;
          padding: .3rem 0 .2rem;
          border-bottom: 1px solid $color36;
          margin: 0 .26rem;
          box-sizing: border-box;
          span {
            display: block;
            width: 100%;
            line-height: .4rem;
            font-size: .4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p {
            font-size: .16rem;
            color: $color86;
          }
        }
        .abst {
          padding: .2rem .26rem;
          font-size: .14rem;
          color: $color87;
        }
      }
    }
  }
  .aside {
    width: 2.76rem;
    background-color: transparent;
    .work {
      position: relative;
      padding: 0 .22rem;
      border-radius: 8px;
      margin-bottom: .18rem;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      background-color: $color2;
      &:nth-of-type(2) {
        h5 {
          .circle {
            &:before {
              background-color: $color89;
            }
            &:after {
              background-color: $color120;
            }
          }
        }
      }
      &:nth-of-type(3) {
        h5 {
          .circle {
            &:before {
              background-color: $color91;
            }
            &:after {
              background-color: $color90;
            }
          }
        }
      }
      h5 {
        width: 100%;
        // min-height: .54rem;
        padding: .14rem .09rem;
        border-bottom: 1px solid $color36;
        box-sizing: border-box;
        // font-family: SourceHanSansCN-Bold;
        font-size: .16rem;
        font-weight: normal;
        text-align: left;
        color: $color47;
        .circle {
          position: relative;
          width: .16rem;
          height: .1rem;
          margin-right: .18rem;
          vertical-align: middle;
          &:before {
            position: absolute;
            top: 50%;
            left: -.04rem;
            z-index: 1;
            width: .1rem;
            height: .1rem;
            border-radius: 50%;
            margin-top: -.04rem;
            background-color: $color48;
            content: '';
          }
          &:after {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 1;
            width: .1rem;
            height: .1rem;
            border-radius: 50%;
            margin-top: -.04rem;
            background-color: $mainColor;
            content: '';
          }
        }
        span {
          vertical-align: middle;
        }
      }
      .list {
        position: relative;
        margin-top: .16rem;
        span {
          display: inline-block;
          padding: .06rem;
          border: 1px solid $color79;
          margin-right: .12rem;
          margin-bottom: .16rem;
          font-size: .14rem;
          vertical-align: middle;
          cursor: pointer;
        }
      }
      .no-data {
        padding-bottom: .16rem;
        font-size: .14rem;
      }
    }
  }
}
</style>